<template>
  <div class="content">
    <div class="title">
      <div class="pone">招生优惠活动</div>
      <div class="ptwo">
        新生线上抢购9.9赠送舞蹈课2节<br>
        老生线上抢购9.9可抵<span>399</span>元学费<br>
        <span>399</span>元学费只限报名年卡时使用<br>
        此活动每人限购1次
      </div>
    </div>
    <div class="inputs">
      <div class="top">已报名<span>{{peopleNum}}</span>人，快来抢购吧！</div>
      <input type="text" v-model="name" placeholder="姓名" maxlength="7">
      <input
        type="text"
        v-model="phone"
        placeholder="电话号码"
        maxlength="11"
        oninput="value=value.replace(/[^\d]/g,'')"
      >
      <toast v-model="isRight" type="cancel" width="50%" position="middle">请输入正确的姓名</toast>
      <toast v-model="wrongNum" type="cancel" width="50%" position="middle">请输入正确的手机号码</toast>
      <toast v-model="alreadyIn" type="cancel" width="50%" position="middle">请勿重复报名</toast>
      <loading :show="alreadyClick" text="正在提交"></loading>
      <!-- <loading :show="failure" text="提交失败"></loading> -->
      <!-- <toast v-model="alreadyClick" :time="5000" :is-show-mask="true" type="cancel" width="50%" position="middle">正在提交</toast>
      <toast v-model="failure" type="cancel" width="50%" position="middle">提交失败</toast> -->
      <div class="pic">
        <img src="../assets/activityIn/bm_button@3x.png" alt>
        <button @click="onclickFunc">9.9抢购</button>
      </div>
    </div>
    <div class="cover">
      <img src="../assets/activityIn/cover.jpg" alt="">
      <img src="../assets/activityIn/lesson.jpg" alt="">
    </div>
    <div class="intro-content">
      <h2>艺星舞蹈培训学校</h2>
      <div>
        艺星的名字：字面意思很简单——艺术之星。这首先包含了我们艺星舞蹈创办人对我们教学的自信以及对学员的期盼。
        我们自信从艺星学成走出去的学员未来在各种舞台都能大放异彩，成为光彩夺目的星星；同时“艺星”的同音也
        是“一心”，这也包含了我们对舞蹈教学的专注度和对舞蹈传播的责任感，不管时光如何改变，艺星都秉承
        着“一心”的精神在舞蹈教学道路上努力奋斗。让更多人走进我们这个专注舞蹈传播的大家庭，在这
        个大家庭中茁壮成长，舞出不一样的精彩。
      </div>
      <br>
      <div>教学理念：快乐舞蹈、华丽蜕变、业余培训、专业成效</div>
      <br>
      <div>教学方法：以科学、高校、生动、创新的方法进行针对性教学，并在教学过程中开发学员潜力、培养学员的自学能力、激发学员的创造力。</div>
      <br>
    </div>
    <div class="dance-kind">
      <span>精品课程：</span>
      <span>中国舞-芭蕾</span>
      <span>街舞-爵士</span>
      <span>拉丁-肚皮舞</span>
      <span></span>均设有儿童和成人课程
    </div>
    <div class="container">
      <div class="scan">
        <div class="way">
          <div class="texts">艺星舞蹈学校地址</div>
          <div class="text">重庆市金开大道355号万科万悦汇1A栋5楼</div>
          <div class>
            <img class="pic_one" src="../assets/activityIn/address.jpg" alt>
          </div>
        </div>
        <div class="way">
          <div class="texts">联系方式</div>
          <div class="text">请长按识别或扫描下方二维码添加贾老师微信</div>
          <div class="scaner">
            <img class="pic_two" src="../assets/activityIn/code.png" alt>
          </div>
        </div>
      </div>
    </div>
    <div>
      <lesson-Show v-for="item in showList" :item="item" :key="item.id"></lesson-Show>
      <br>
    </div>
    <div class="footer">
       <img src="../assets/activityIn/code.jpg" alt="">
       <div class="f-01">关注“艺星舞蹈生活馆”</div> 
    </div>
    <div class="footer02">有技术服务需求，请联系微信：wx12231626</div>
  </div>
</template>
<script>
import { Toast,Loading } from "vux";
import WechatService from '../assets/js/WechatService'
import LessonShow from "../component/lessonShow";
import a from "../assets/introduce/1636.jpg";
import m from "../assets/introduce/1648.jpg";
import x from "../assets/introduce/1659.jpg";
import b from "../assets/introduce/1637.jpg";
import n from "../assets/introduce/1649.jpg";
import y from "../assets/introduce/1660.jpg";
import c from "../assets/introduce/1638.jpg";
import o from "../assets/introduce/1650.jpg";
import z from "../assets/introduce/1661.jpg";
import d from "../assets/introduce/1639.jpg";
import p from "../assets/introduce/1651.jpg";
import aa from "../assets/introduce/1662.jpg";
import e from "../assets/introduce/1640.jpg";
import q from "../assets/introduce/1652.jpg";
import ab from "../assets/introduce/1663.jpg";
import f from "../assets/introduce/1641.jpg";
import r from "../assets/introduce/1653.jpg";
import ac from "../assets/introduce/1664.jpg";
import g from "../assets/introduce/1642.jpg";
import s from "../assets/introduce/1654.jpg";
import ad from "../assets/introduce/1665.jpg";
import h from "../assets/introduce/1643.jpg";
import t from "../assets/introduce/1655.jpg";
import ae from "../assets/introduce/1666.jpg";
import i from "../assets/introduce/1644.jpg";
import u from "../assets/introduce/1656.jpg";
import af from "../assets/introduce/1667.jpg";
import j from "../assets/introduce/1645.jpg";
import v from "../assets/introduce/1657.jpg";
import ag from "../assets/introduce/1668.jpg";
import k from "../assets/introduce/1646.jpg";
import w from "../assets/introduce/1658.jpg";
import ah from "../assets/introduce/1669.jpg";
import l from "../assets/introduce/1647.jpg";
import ai from "../assets/introduce/1670.jpg";
import aj from "../assets/introduce/1671.jpg";
import ak from "../assets/introduce/1672.jpg";
import am from "../assets/introduce/1674.jpg";
import an from "../assets/introduce/1675.jpg";
import ao from "../assets/introduce/1676.jpg";
import ap from "../assets/introduce/1677.jpg";
import aq from "../assets/introduce/1678.jpg";
export default {
  name: "lessonPage",
  data() {
    return {
      showList: [
        { title: "强大的师资力量", avator: a },
        { avator: c },
        { avator: d },
        { avator: b },
        { avator: e },
        { avator: f },
        { avator: g },
        { title: "温馨的教学环境", avator: h },
        { avator: i },
        { avator: j },
        { avator: k },
        { avator: l },
        { avator: m },
        { avator: n },
        { title: "老师与宝宝们的互动", avator: o },
        { avator: p },
        { avator: q },
        { avator: r },
        { avator: s },
        { title: "精彩的演出节目", avator: t },
        { avator: u },
        { avator: v },
        { avator: w },
        { avator: x },
        { avator: y },
        { avator: z },
        { avator: aa },
        { avator: ab },
        { avator: ac },
        { title: "课堂风采展示", avator: ad },
        { avator: ae },
        { avator: af },
        { avator: ag },
        { avator: ah },
        { avator: ai },
        { avator: aj },
        { avator: ak },
        { avator: am },
        { avator: an },
        { avator: ao },
        { avator: ap },
         { avator: aq },

      ],
      isRight: false,
      wrongNum: false,
      alreadyClick:false,
      failure:false,
      alreadyIn: false,
      peopleNum:0,
      clockTime: "",
      name: "",
      phone: ""
    };
  },
  mounted(){
    this.wxConfig();
    //获取实时报名人数
     var params = new Object();
     var postParams = JSON.stringify(params);
       this.$http
        .get(this.$DEV_ENV_API + "/api/getCourseUserCount")
        .then(res => {
          this.peopleNum = res.data.data;
        })
  },
  components: {
    Toast,
    Loading,
    LessonShow
  },
  methods: {
    onclickFunc() {
      if (this.name == "") {
        this.isRight = true;
      } else if (!/^1[34578]\d{9}$/.test(this.phone)) {
        this.wrongNum = true;
      }else{
        this.alreadyClick = true;
        let openID = sessionStorage.getItem("openid");
        let param = new Object();
        param.openId = openID;
        //param.openID = o8ztj1v7ErdaX9mMPmclCDT4sO8U;
        param.name = this.name;
        param.phone = this.phone;
        let postParam = JSON.stringify(param);
        this.$http
          .post(this.$DEV_ENV_API + "/api/postActivity", postParam)
          .then(({ data }) => {
            // setTimeout(function(){  this.alreadyClick = false;
            // if (data.code == "1") {
            //   this.$router.push({path:"/pay"})
            // } else {
            //   this.alreadyIn = true;
            // } }, 3000);
            this.alreadyClick = false;
            if (data.code == "1") {
              this.$router.push({path:"/pay"})
            } else {
              this.alreadyIn = true;
            }
          });
      }
    },
    //分享
    wxConfig() {
      let url = this.$DEV_ENV_API + "/api/public/yixing/index.html?type=1";
      this.$http
        .get(this.$DEV_ENV_API + "/api/getSignature", {
          params: {
            url: location.href.split("#")[0]
          }
        })
        .then(res => {
          WechatService.shareConfig.imgUrl = encodeURI(
            "https://www.babywit.club/api/public/uploadFile/yxImage/yx_logo.jpg"
          );
          WechatService.shareConfig.title = "艺星舞蹈-抢购暑期名额";
          WechatService.shareConfig.desc =
            "投票享优惠，凡参与此次投票活动均有机会9.9抢购优惠名额!名额有限，先到先得!";
          WechatService.shareConfig.link =
            "https://www.babywit.club/api/public/yixing/index.html?type=1&candidateId=lesson";
          WechatService.config(res.data.data, function(res) {
            WechatService.showShareMenu();
            WechatService.shareToAppMsg();
            WechatService.shareToTimeline();
          });
        })
        .catch(err => {});
    }
  },
};
</script>
<style lang="less" scoped>
.top{
  font-size: 20px;
  color: #09808f;
}
.top span{
  color: #ed60b1;
  font-size: 20px;
}
.content {
  background-image: url(../assets/activityIn/BJ@3x.png);
  background-repeat: no-repeat;
  background-size: 100%;
  // background-position: top;
  background-color: #f7d3e8;
}
.title {
  display: flex;
  flex-direction: column;
  text-align: center;
}
.cover{
  display: flex;
  margin-top: 50px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.cover img{
  width: 93%;
  margin-top: 40px;

}
.pone {
  color: #09808f;
  font-size: 26px;
  margin-top: 60px;
  font-family: "PingFang-SC-Medium";
}
.ptwo {
  color: #09808f;
  font-size: 14px;
  font-family: "PingFang-SC-Medium";
  margin-top: 17px;
  letter-spacing: 1px;
  line-height: 22px;
}
.ptwo span {
  color: #ed60b1;
  font-size: 16px;
}
.inputs {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 120px;
}
.inputs input {
  height: 60px;
  width: 307px;
  border: 2px solid #09808f;
  text-indent: 20px;
  color: #09808f;
  font-size: 14px;
  font-family: "PingFang-SC-Semibold";
  border-radius: 20px;
  background-color: #ffe9f6;
  margin-top: 16px;
  outline: none;
}
.pic img {
  height: 60px;
  width: 307px;
}
.pic {
  margin-top: 16px;
  position: relative;
}
button {
  position: absolute;
  border: 0;
  top: 50%;
  left: 50%;
  width: 307px;
  height: 60px;
  transform: translate(-50%, -50%);
  background-color: transparent;
  outline: none;
  color: #fff;
  font-size: 28px;
  font-family: "PingFang-SC-Semibold";
}
.container {
  padding-top: 15px;
}
.scan {
  display: flex;
  flex-direction: column;
  width: 90%;
  height: 480px;
  margin: 0 auto;
  margin-top: 10px;
  background-color: #fff;
  border-radius: 20px;
  font-size: 14px;
  text-align: center;
}
.text {
  color: #4a4a4a;
  line-height: 50px;
}
.texts {
  color: #ffb832;
  margin-top: 20px;
}
.way {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.scaner {
  width: 120px;
  height: 120px;
  border: 2px solid #09808f;
  border-radius: 20px;
}
.pic_two {
  width: 80%;
  margin-top: 11px;
}
.pic_one {
  width: 120px;
  height: 120px;
  border: 2px solid #09808f;
  border-radius: 20px;
}
.picture {
  width: 44px;
  height: 44px;
  margin-top: 20px;
}
.intro-content {
  display: flex;
  flex-direction: column;
  width: 90%;
  //text-align: center;
  margin: 0 auto;
  line-height: 25px;
  margin-left: 20px;
  margin-top: 60px;
  font-size: 14px;
}
.intro-content h2 {
  text-align: center;
  margin-left: 20px;
  color: #09808f;
}
.dance-kind {
  display: flex;
  flex-direction: column;
  line-height: 25px;
  margin-left: 20px;
  font-size: 14px;
}
.dance-kind span {
  font-size: 14px;
}
.introduce {
  color: #09808f;
  text-align: center;
  margin-top: 20px;
}
.introduce img {
  display: flex;
  flex-direction: column;
  margin-top: 20px;
  margin: 0 auto;
  margin-top: 20px;
  width: 93%;
}
.footer{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 80%;
  margin: 0 auto;
  border-top: 1px solid #dcdcdc;
  margin-top: 20px;
  font-size:14px;
  color: #09808f;
}
.footer img{
  width: 50%;
  margin-top: 20px;
}
.f-01{
  margin-top: 20px;
}
.footer02{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 80%;
  margin: 0 auto;
  border-top: 1px solid #dcdcdc;
  margin-top: 80px;
  padding-top: 20px;
  color: #999999;
  font-size:12px;
}
</style>

